<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button @click="list.push('活着')">给数组加元素</button>
      <button @click="list.pop()">删除</button>
      <ul>
        <!-- 遍历list这个数组，数组有多少个元素，就创建多少个li -->
        <!-- item就是数组中的每一项 -->
        <!-- <li v-for="item in list"> {{ item }} </li> -->

        <!-- 完整写法：既可以拿每一项，又可以拿到下标 -->
        <!-- 第一个是数组中每一项，第二个一定是下标，跟名字没有关系，跟名字可以随便写 -->
        <li v-for="item in list">{{item}}</li>
        <br />
        <li v-for="(item, index) in list">{{item}}---{{index}}</li>
      </ul>
      <ul>
        <li v-for="value in obj">{{value}}</li>
        <!-- 完整写法：既可以拿到属性值，也可以拿到属性名（key） -->
        <!-- 第一个一定是属性值，第二个一定是属性名 -->
        <li v-for="(value, key) in obj">{{ value }} -- {{ key }}</li>
      </ul>
      <!-- 循环 -->
      <ul>
        <li v-for="num in 5 ">{{num}}</li>
      </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          list: ["西游记", "红楼梦", "水浒传", "三国演义"],
          obj: {
            name: "jack",
            age: 25,
          },
        },
      })
    </script>
  </body>
</html>
